import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useUserProfile } from '@/hooks/useUserProfile';
import useIsMobile from '@/hooks/isMoboile';
import { useAiPersonData } from '@/hooks/useAiPersonData';
import LoginModal from '@/components/LoginModal';
import TokenInsufficientModal from '@/components/TokenInsufficientModal';
import MessageBubble from './MessageBubble';
import MessageInput from './MessageInput';
import { ChatService } from '../../../../api/chatService';
import { AudioPlayer } from '../../../../hooks/audioUtils';
import { Message } from '../types';
import { request } from '../../../../api/request';
import { getVisitorUuid } from '../../../../utils/userUtils';
import { number } from 'framer-motion';

/**
 * 主聊天窗口组件
 * 功能：管理整个聊天界面的核心逻辑和状态
 * 特性：
 * - 消息管理：处理消息的发送、接收、存储和显示
 * - 聊天历史：从API加载和管理聊天历史记录
 * - 音频播放：集成音频播放器，支持语音消息播放
 * - 实时通信：使用ChatService处理实时消息流
 * - 状态同步：管理各种UI状态和用户交互状态
 * - 响应式设计：支持移动端和桌面端的不同布局
 * - 性能优化：使用useCallback和useMemo优化渲染性能
 */

interface ChatWindowProps {
  aiAvatar?: string;
  userAvatar?: string;
  activeTab: string;
  setActiveTab: (tab: string) => void;
  onLastMessageUpdate?: (lastMessage: string, chatId?: string) => void; // 🔧 修复：添加chatId参数
  isVoiceMode?: boolean;
  onReady?: () => void; // 新增：渲染并滚动到底部后回调
  onImagePreview?: (imageUrl: string) => void; // 新增：图片预览回调
}

/**
 * 主聊天窗口组件
 * 集成消息显示、输入、语音播放等功能
 */
const ChatWindow: React.FC<ChatWindowProps> = ({
  aiAvatar,
  // userAvatar,
  activeTab,
  // setActiveTab,
  onLastMessageUpdate,
  isVoiceMode = false,
  onReady,
  onImagePreview
}) => {
  // 从sessionStorage获取当前对话ID
  const [id, setId] = useState<string | undefined>(() => {
    return sessionStorage.getItem('currentConversationId') || undefined;
  });

  // 监听sessionStorage变化
  useEffect(() => {
    const handleStorageChange = () => {
      const newId = sessionStorage.getItem('currentConversationId');
      setId(newId || undefined);
    };

    // 监听storage事件（跨标签页的变化）
    window.addEventListener('storage', handleStorageChange);
    
    // 定期检查sessionStorage变化（同标签页内的变化）
    const interval = setInterval(handleStorageChange, 100);

    return () => {
      window.removeEventListener('storage', handleStorageChange);
      clearInterval(interval);
    };
  }, []);

  const { t, i18n } = useTranslation();
  const {
    isLoggedIn,
    userData,
    showLoginModal,
    closeLoginModal,
    handleLoginSuccessAndUpdateTab,
    openLoginModal
  } = useUserProfile();
  const { aiPersonData } = useAiPersonData();
  const isMobile = useIsMobile();

  // 状态管理
  const [messages, setMessages] = useState<Message[]>([]);
  const [initialGreetingLoaded, setInitialGreetingLoaded] = useState(false);
  const [initialGreetingRequested, setInitialGreetingRequested] = useState(false);
  const [messagesLoading, setMessagesLoading] = useState(false);
  const [messagesError, setMessagesError] = useState<string | null>(null);
  const [waitingForAIReply, setWaitingForAIReply] = useState(false);
  // Token不足弹窗状态
  const [showTokenModal, setShowTokenModal] = useState(false);
  const [tokenModalData, setTokenModalData] = useState<{
    currentBalance: number;
    required: number;
    serviceType: 'text' | 'voice' | 'img';
  }>({ currentBalance: 0, required: 0, serviceType: 'text' });

  // Refs
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const chatServiceRef = useRef<ChatService | null>(null);
  const audioPlayerRef = useRef<AudioPlayer | null>(null);

  // 新增：用于跟踪上一次消息状态的ref
  const prevMessagesRef = useRef<Message[]>([]);
  const isUserScrollingRef = useRef(false);

  // 新增：用于跟踪已自动播放的消息ID，避免重复播放
  const autoPlayedMessagesRef = useRef<Set<string>>(new Set());

  // 新增：用于确保onReady只调用一次
  const hasCalledReadyRef = useRef(false);
  // 新增：用于跟踪滚动完成状态
  const scrollCompleteRef = useRef(false);
  // 新增：用于跟踪消息渲染完成状态
  const messagesRenderedRef = useRef(false);

  // 🔧 路由切换时优化重置状态过程
  useEffect(() => {
    // console.log('🔄 聊天页面路由变化，优化重置状态:', { id });

    // 重置关键状态到初始值
    setMessages([]);
    setInitialGreetingLoaded(false);
    setInitialGreetingRequested(false);
    setMessagesLoading(false);
    setMessagesError(null);
    // 🔧 关键修复：重置等待AI回复状态，确保新对话的输入框可用
    setWaitingForAIReply(false);

    // 重置部分智能滚动相关的ref
    prevMessagesRef.current = [];
    isUserScrollingRef.current = false;

    // 重置自动播放跟踪
    autoPlayedMessagesRef.current.clear();

    // 🔧 修复：清理消息处理记录，避免跨聊天的消息ID冲突
    const previouslyProcessedCount = processedMessagesRef.current.size;
    processedMessagesRef.current.clear();
    // console.log('🧹 清理消息处理记录:', { previouslyProcessedCount, newChatId: id });

    // 🔧 修复：重置历史消息加载状态和完成时间
    isLoadingHistoryRef.current = false;
    historyLoadCompleteTimeRef.current = 0;

    // 重置onReady回调状态，确保在路由变化时能再次触发
    hasCalledReadyRef.current = false;

    // 清理旧的服务实例
    if (chatServiceRef.current) {
      chatServiceRef.current.destroy();
      chatServiceRef.current = null;
    }
    if (audioPlayerRef.current) {
      audioPlayerRef.current.destroy();
      audioPlayerRef.current = null;
    }

    // 优化：快速设置messagesRenderedRef为true，加速ready条件满足
    setTimeout(() => {
      messagesRenderedRef.current = true;
      // 如果没有历史消息，可以直接标记滚动完成
      // if (id) {
      //   console.log('预先标记消息已渲染，加速loading结束');
      // }
    }, 100);
  }, [id]); // 仅依赖id变化

  // 新增：针对空消息列表的快速ready处理
  useEffect(() => {
    if (!messagesLoading && messages.length === 0 && !hasCalledReadyRef.current && onReady) {
      // 无消息情况下，延迟短暂时间后直接标记为准备就绪
      setTimeout(() => {
        // console.log('检测到空消息列表，快速标记为ready');
        messagesRenderedRef.current = true;
        scrollCompleteRef.current = true;
        hasCalledReadyRef.current = true;
        onReady();
      }, 200);
    }
  }, [messagesLoading, messages.length, onReady]);

  // 获取背景图片 - 优化为useMemo，避免重复计算
  // const backgroundImage = useMemo((): string | null => {
  //   // 只在移动端显示背景
  //   if (!isMobile) return null;

  //   // 优先从localStorage获取用户设置的背景图片
  //   if (id) {
  //     const customBg = localStorage.getItem(`bg_image_${id}`);
  //     if (customBg) {
  //       return customBg;
  //     }
  //   }

  //   // 如果没有自定义背景，使用默认的第一张图片
  //   if (aiPersonData?.images && aiPersonData.images.length > 0) {
  //     return aiPersonData.images[0];
  //   }

  //   return null;
  // }, [isMobile, id, aiPersonData?.images]);

  // 获取语言代码 - 优化为useMemo，避免重复计算
  const getLanguageCode = useMemo((): string => {
    if (i18n.language.startsWith('zh')) return 'CN';
    if (i18n.language.startsWith('ja')) return 'JP';
    return 'EN';
  }, [i18n.language]);

  // 🔧 从API获取聊天历史消息 - 添加loading完成检查
  const loadChatHistoryFromAPI = useCallback(async (chatId: string, forceReload = false) => {
    try {
      // 🔧 检查全局loading完成状态，防止重复loading
      if (typeof window !== 'undefined' && window.chatLoadingCompleted && !forceReload) {
        // console.log('🛑 Chat页面loading已完成，跳过历史消息加载');
        return;
      }

      // 🔧 修复：设置历史消息加载状态，防止WebSocket事件重复处理
      isLoadingHistoryRef.current = true;
      // console.log('🔄 开始加载历史消息，设置加载状态标记');

      setMessagesLoading(true);
      setMessagesError(null);

      // 获取UUID
      const uuid = getVisitorUuid();
      if (!uuid) {
        // console.log('未找到用户UUID，跳过聊天历史加载');
        setMessages([]);
        return;
      }

      // console.log('🔄 开始从API获取聊天历史消息:', { uuid, chatId, forceReload });

      // 发起API请求
      const response = await request.get('/api/chat/ChatHistoryMessage', {
        params: { uuid, id: chatId }
      });

      if (response.data.success && response.data.data && Array.isArray(response.data.data.messages)) {
        const messagesData = response.data.data.messages;
        // console.log('✅ 成功获取聊天历史消息:', messagesData.length, '条记录');

        // 调试：打印完整API响应结构
        // console.log('🔍 完整API响应数据:', response.data);

        // 调试：打印原始API数据结构
        const imageMessages = messagesData.filter((msg: any) => msg.type === 'image');
        if (imageMessages.length > 0) {
          // console.log('🖼️ 图片消息原始数据结构:', imageMessages);
        }

        // 将API返回的消息转换为Message类型并设置到状态中
        const formattedMessages: Message[] = messagesData.map((msg: any) => {
          // console.log('🔍 处理消息:', {
          //   id: msg.id,
          //   type: msg.type,
          //   imageUrl: msg.imageUrl,
          //   content: msg.content
          // });

          return {
            ...msg,
            // 确保必需的字段存在
            receivedAt: msg.sender === 'ai' ? (msg.receivedAt || msg.timestamp) : undefined,
            isStreaming: false
            // imageUrl字段直接从API返回的数据中获取，不需要额外处理
          };
        });

        setMessages(formattedMessages);

        // 🔧 修复：对所有从API加载的消息进行标记，防止WebSocket事件重复添加
        // API加载的消息已经在消息列表中，WebSocket事件应该只能更新而不能重复添加
        formattedMessages.forEach(msg => {
          if (msg.id) {
            processedMessagesRef.current.add(msg.id);
            // console.log('🔧 标记API加载的消息为已处理:', { id: msg.id, type: msg.type, status: msg.status });
          }
        });
        // console.log('🔧 历史消息加载完成，已标记所有消息为已处理:', {
        //   messageCount: formattedMessages.length,
        //   timestamp: Date.now(),
        //   chatId
        // });

        // 清除初始问候相关状态，因为已经有历史消息了
        if (formattedMessages.length > 0) {
          setInitialGreetingLoaded(true);
          setInitialGreetingRequested(true);

          // 🎯 关键需求：数据加载完成后立即调用 Edit-ChatStatus
          // 但只有当前页面对应的聊天才发起请求
          if (chatId === id) {
            // console.log('✅ 当前页面匹配聊天ID，检查是否有未读消息');

            // 找到最后一条AI消息，如果状态为 Unread，则调用 Edit-ChatStatus
            const lastAIMessage = [...formattedMessages]
              .reverse()
              .find(msg => msg.sender === 'ai' && msg.status === 'Unread');

            if (lastAIMessage) {
              // console.log('🔄 当前页面数据加载完成，发现未读AI消息，立即调用 Edit-ChatStatus:', lastAIMessage.id);

              request.post('/api/chat/Edit-ChatStatus', {
                id: Number(chatId),           // 当前AI的id
                chatId: lastAIMessage.id,     // 消息id
                ai_person_id: chatId          // ai_person_id参数
              }).then(res => {
                // console.log('✅ 当前页面 Edit-ChatStatus 请求成功:', res.data);

                // 更新本地消息状态为已读
                setMessages(prev => prev.map(msg =>
                  msg.id === lastAIMessage.id ? { ...msg, status: 'Read' } : msg
                ));
              }).catch(err => {
                // console.error('❌ 当前页面 Edit-ChatStatus 请求失败:', err);
                console.error('Edit-ChatStatus request failed', err);
              });
            } else {
              // console.log('ℹ️ 当前页面数据加载完成，没有发现未读AI消息');
            }
          } else {
            // console.log('ℹ️ 非当前页面的聊天数据，跳过 Edit-ChatStatus 请求', {
            //   loadedChatId: chatId,
            //   currentPageId: id
            // });
          }
        }
      } else {
        // console.warn('API返回格式异常:', response.data);
        console.error('API return format exception', response.data);
        setMessages([]);

        // 优化：API返回异常时，也应该尝试快速结束loading
        if (onReady && !hasCalledReadyRef.current) {
          setTimeout(() => {
            // console.log('API返回异常，快速标记为ready');
            messagesRenderedRef.current = true;
            scrollCompleteRef.current = true;
            hasCalledReadyRef.current = true;
            onReady();
          }, 50);
        }
      }
    } catch (error) {
      // console.error('❌ 获取聊天历史消息失败:', error);
      console.error('load chat history failed', error);
      setMessagesError(t('chat.loadHistoryFailed'));
      // 出错时显示空消息列表，不影响用户继续聊天
      setMessages([]);

      // 优化：API请求失败时，也应该尝试快速结束loading
      if (onReady && !hasCalledReadyRef.current) {
        setTimeout(() => {
          // console.log('API请求失败，快速标记为ready');
          messagesRenderedRef.current = true;
          scrollCompleteRef.current = true;
          hasCalledReadyRef.current = true;
          onReady();
        }, 50);
      }
    } finally {
      setMessagesLoading(false);
      // 🔧 修复：清除历史消息加载状态标记，并记录完成时间
      isLoadingHistoryRef.current = false;
      historyLoadCompleteTimeRef.current = Date.now();
      // console.log('🔄 历史消息加载完成，清除加载状态标记，记录完成时间');
    }
  }, []);

  // 滚动到最新消息 - 优化版本，更宽松的条件判断
  const scrollToBottom = useCallback(() => {
    // 标记消息已渲染
    messagesRenderedRef.current = true;

    // 执行滚动
    messagesEndRef.current?.scrollIntoView({ behavior: 'auto' });

    // 使用setTimeout替代requestAnimationFrame，并简化逻辑
    setTimeout(() => {
      // 检查滚动状态
      const messageContainer = messagesEndRef.current?.parentElement;
      if (messageContainer) {
        const { scrollTop, scrollHeight, clientHeight } = messageContainer;
        // 增加容差值，更宽松的滚动底部判断
        const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 50; // 50px容差

        // 标记滚动完成状态
        scrollCompleteRef.current = isAtBottom || messages.length <= 3; // 消息少时直接认为滚动成功

        // 尝试再次滚动（无论是否在底部）
        messagesEndRef.current?.scrollIntoView({ behavior: 'auto' });

        // 确保只在首次渲染后调用onReady，条件更宽松
        if (onReady && !hasCalledReadyRef.current && messagesRenderedRef.current) {
          // 消息少或已在底部时直接触发ready，否则再给一次机会
          if (isAtBottom || messages.length <= 3) {
            hasCalledReadyRef.current = true;
            onReady();
          } else {
            // 最后一次尝试滚动
            messagesEndRef.current?.scrollIntoView({ behavior: 'auto' });
            hasCalledReadyRef.current = true;
            onReady(); // 无论是否滚动成功，都标记为ready
          }
        }
      }
    }, 50); // 减少延迟
  }, [onReady, messages.length]);

  // 音频重播函数 - 使用useCallback优化
  const handleAudioReplay = useCallback(async (messageId: string, audioData: string) => {
    if (!audioPlayerRef.current || !audioData) return;

    try {
      // 停止所有正在播放的音频，并将被停止的音频状态恢复为成功状态
      setMessages(prev => prev.map(msg =>
        msg.type === 'audio' && msg.isPlaying
          ? {
            ...msg,
            isPlaying: false,
            // 🔧 修复：将被中断的音频消息状态恢复为Success，避免状态异常
            status: 'Success' as const
          }
          : msg
      ));

      // 设置当前消息为播放状态
      setMessages(prev => prev.map(msg =>
        msg.id === messageId
          ? { ...msg, isPlaying: true }
          : msg
      ));

      // 设置播放状态回调
      audioPlayerRef.current.setPlayStateCallback(handleAudioPlayStateChange(messageId));

      // 播放音频
      await audioPlayerRef.current.playFromAudioData(audioData);
    } catch (error) {
      // console.error('重播音频失败:', error);
      console.error('replay audio failed', error);
      // 重播失败，重置播放状态
      setMessages(prev => prev.map(msg =>
        msg.id === messageId
          ? { ...msg, isPlaying: false }
          : msg
      ));
    }
  }, []);

  // 音频播放状态变化处理 - 使用useCallback优化
  const handleAudioPlayStateChange = useCallback((messageId: string) => (isPlaying: boolean, duration?: number, audioData?: string) => {
    // console.log('🎵 音频播放状态变化:', { messageId, isPlaying, duration, hasAudioData: !!audioData, isMobile });

    setMessages(prev => {
      let found = false;
      const updatedMessages = prev.map(msg => {
        if (msg.id === messageId) {
          found = true;
          const updatedMsg = {
            ...msg,
            isPlaying,
            duration: duration || msg.duration,
            // 当音频播放完成时，设置消息状态为completed；开始播放时清除streaming状态
            status: !isPlaying && msg.type === 'audio' ? 'Success' as const :
              (isPlaying && msg.type === 'audio' ? 'playing' as const : msg.status),
            isStreaming: msg.type === 'audio' ? false : msg.isStreaming, // 音频消息播放时清除streaming状态
            audioData: audioData || msg.audioData
          };

          // console.log('🎵 更新后的消息状态:', {
          //   id: messageId,
          //   isPlaying: updatedMsg.isPlaying,
          //   status: updatedMsg.status,
          //   isStreaming: updatedMsg.isStreaming,
          //   hasAudioData: !!updatedMsg.audioData,
          //   isMobile
          // });

          // 如果音频播放完成且有音频数据且还没保存过，调用chatService保存
          if (!isPlaying && duration && audioData && !msg.audioData && chatServiceRef.current) {
            // console.log('🎵 [PC端] 触发音频完成保存条件:', {
            //   messageId,
            //   isPlaying,
            //   hasDuration: !!duration,
            //   hasAudioData: !!audioData,
            //   msgAudioData: !!msg.audioData,
            //   msgStatus: msg.status
            // });

            // 使用setTimeout确保状态更新后再保存，避免重复保存
            setTimeout(async () => {
              await chatServiceRef.current?.completeAudioMessage(messageId, duration, audioData);
            }, 0);
          }

          // 移动端特殊处理：如果音频播放完成但没有audioData，也要确保状态更新
          if (!isPlaying && msg.type === 'audio' && isMobile && !audioData && !msg.audioData) {
            // console.log('🔥🔥🔥 [移动端] 音频播放完成但无数据，强制保存状态');
            setTimeout(async () => {
              await chatServiceRef.current?.completeAudioMessage(messageId, duration || 1, '');
            }, 0);
          }

          // 当音频播放完成时，确保历史记录已更新（防止遗漏）
          if (!isPlaying && updatedMsg.content && onLastMessageUpdate) {
            onLastMessageUpdate(updatedMsg.content, id); // 🔧 修复：传递当前聊天ID
          }

          return updatedMsg;
        }
        return msg;
      });

      if (!found) {
        // console.warn('音频播放状态更新：未找到匹配的消息ID', messageId);
        console.error('audio play state update: no matching message id', messageId);
      }

      return updatedMessages;
    });
  }, [onLastMessageUpdate, isMobile]);

  // 移动端可播放状态变化处理 - 使用useCallback优化
  // const handleAudioCanPlayChange = useCallback((messageId: string) => (canPlay: boolean) => {
  //   console.log('🎵 [移动端] 可播放状态变化:', { messageId, canPlay });

  //   setMessages(prev => prev.map(msg => {
  //     if (msg.id === messageId && msg.type === 'audio') {
  //       return {
  //         ...msg,
  //         canPlay // 添加canPlay状态用于显示播放按钮
  //       };
  //     }
  //     return msg;
  //   }));
  // }, []);

  // 移动端手动开始播放 - 使用useCallback优化
  const handleMobilePlayStart = useCallback((messageId: string) => {
    // console.log('🎵 [移动端] 用户点击播放按钮:', messageId);

    if (audioPlayerRef.current) {
      audioPlayerRef.current.startPlaybackManually();
    }
  }, []);

  // 暂停音频播放 - 使用useCallback优化
  const handleAudioPause = useCallback((messageId: string) => {
    // console.log('🎵 用户点击暂停按钮:', messageId);

    if (audioPlayerRef.current) {
      // 暂停音频播放器
      audioPlayerRef.current.pause();

      // 更新对应消息的播放状态，并确保状态正确
      setMessages(prev => prev.map(msg =>
        msg.id === messageId && msg.type === 'audio'
          ? {
            ...msg,
            isPlaying: false,
            // 🔧 修复：确保暂停后的音频消息状态为Success，避免状态异常
            status: 'Success' as const
          }
          : msg
      ));
    }
  }, []);

  // 初始化聊天服务
  useEffect(() => {
    if (id) {
      // console.log('🚀 开始初始化聊天服务:', { id, hasToken: !!userData?.visitor_token });

      const token = userData?.visitor_token;
      const chatService = new ChatService(id, token);
      chatServiceRef.current = chatService;
      
      // 设置翻译函数，确保国际化正常工作
      chatService.setTranslationFunction(t);

      const audioPlayer = new AudioPlayer();
      audioPlayerRef.current = audioPlayer;

      // 设置回调函数
      chatService.setCallbacks({
        onMessage: (message: Message) => {
          // 为AI消息设置接收时间
          if (message.sender === 'ai') {
            message.receivedAt = Date.now();
          }

          setMessages(prev => {
            const existingIndex = prev.findIndex(m => m.id === message.id);
            if (existingIndex >= 0) {
              // console.log('🔧 ChatService更新现有消息:', message.id);
              const newMessages = [...prev];
              newMessages[existingIndex] = message;
              return newMessages;
            } else {
              // console.log('🔧 ChatService添加新消息:', message.id);
              // 🔧 修复：只对新添加的消息标记为已处理
              if (message.id) {
                processedMessagesRef.current.add(message.id);
              }
              return [...prev, message];
            }
          });

          // 更新历史记录的最后一条消息（无论是用户还是AI）
          if (message.content && onLastMessageUpdate) {
            onLastMessageUpdate(message.content, id); // 🔧 修复：传递当前聊天ID
          }

          // AI消息且状态为完成时，清除等待状态
          if (message.sender === 'ai' && (message.status === 'completed' || message.status === 'Success' || message.status === 'Read')) {
            // console.log('🔧 AI消息完成，清除等待状态:', { messageId: message.id, type: message.type, status: message.status });
            setWaitingForAIReply(false);
          }

          // AI消息且状态为失败时，清除等待状态
          if (message.sender === 'ai' && (message.status === 'failed' || message.status === 'Failure')) {
            // console.log('🔧 AI消息失败，清除等待状态:', { messageId: message.id, type: message.type, status: message.status });
            setWaitingForAIReply(false);
          }
        },
        onStreamUpdate: (messageId: string, content: string, done: boolean) => {
          setMessages(prev => {
            const updatedMessages = prev.map(msg =>
              msg.id === messageId
                ? {
                  ...msg,
                  content,
                  status: (done ? 'Success' : 'streaming') as 'completed' | 'streaming' | 'Success',
                  isStreaming: !done,
                  receivedAt: msg.receivedAt || Date.now()
                }
                : msg
            );

            // 当消息流式更新完成时，更新历史记录的最后一条消息
            if (done && content && onLastMessageUpdate) {
              onLastMessageUpdate(content, id); // 🔧 修复：传递当前聊天ID
            }

            return updatedMessages;
          });

          // 流式更新完成时，清除等待状态
          if (done) {
            // console.log('🔧 流式更新完成，清除等待状态:', { messageId, done });
            setWaitingForAIReply(false);
          }
        },
        // 移除音频块回调，现在使用非流式音频响应
      });

      // 从API加载历史消息而不是localStorage
      loadChatHistoryFromAPI(id);

      // 清理函数
      return () => {
        chatService.destroy();
        audioPlayer.destroy();
      };
    }
  }, [id, t]); // 依赖id和翻译函数变化

  // 当语言改变时，更新ChatService的翻译函数
  useEffect(() => {
    if (chatServiceRef.current) {
      chatServiceRef.current.setTranslationFunction(t);
    }
  }, [t]);

  // 🔧 专门处理初始问候请求 - 优化依赖，避免循环触发
  useEffect(() => {
    // 如果已经请求过或已经加载过，不再重复请求
    if (initialGreetingRequested || initialGreetingLoaded) {
      return;
    }

    // 确保所有必要数据都已加载
    if (!id || !userData?.visitor_uuid || !aiPersonData || !chatServiceRef.current) {
      return;
    }

    // 只有在消息加载完成后才检查是否需要初始问候
    // messagesLoading === false 表示API请求已完成（无论成功或失败）
    if (!messagesLoading) {
      // 检查是否是首次聊天（无历史消息）
      // 🔧 使用当前messages状态而不是依赖messages.length避免循环
      const currentMessages = messages;
      if (currentMessages.length === 0) {
        // console.log('🔄 首次聊天检测：API返回空历史消息，开始请求初始问候');

        // 标记为已请求，避免重复请求
        setInitialGreetingRequested(true);

        // 执行初始问候请求
        const requestInitialGreeting = async () => {
          try {
            // 🔧 在函数内部计算语言代码，避免依赖i18n.language
            const languageCode = i18n.language.startsWith('zh') ? 'CN'
              : i18n.language.startsWith('ja') ? 'JP'
                : 'EN';

            // console.log('🚀 开始请求初始问候，参数:', {
            //   uuid: userData.visitor_uuid,
            //   aiPersonId: id,
            //   language: languageCode
            // });

            const greeting = await chatServiceRef.current?.getInitialGreeting(
              userData,
              id, // 使用当前AI的ID
              languageCode
            );

            if (greeting) {
              // console.log('✅ 成功获取初始问候:', greeting);

              // 设置为已加载
              setInitialGreetingLoaded(true);

              // 分别添加图片和文本消息
              chatServiceRef.current?.addInitialGreetingMessages(greeting.image, greeting.text);

              // 🔧 修复：将初始问候消息也标记为已处理，避免重复添加
              // 注意：这里需要等ChatService生成消息ID后再标记，但目前先预防性处理
            } else {
              // console.warn('🚫 初始问候数据为空或无效');
              console.error('initial greeting data is empty or invalid');
            }
          } catch (error) {
            // console.error('❌ 获取初始问候失败:', error);
            console.error('get initial greeting failed', error);
          }
        };

        // 执行请求
        requestInitialGreeting();
      } else {
        // console.log('ℹ️ API返回了历史消息，跳过初始问候请求');
        // 有历史消息，设置为已加载状态避免再次检查
        setInitialGreetingLoaded(true);
      }
    }
  }, [id, userData, aiPersonData, initialGreetingLoaded, initialGreetingRequested, messagesLoading]); // 🔧 移除 messages.length 和 i18n.language 依赖，避免循环

  // 监听userData变化，更新token
  useEffect(() => {
    if (chatServiceRef.current && userData?.visitor_token) {
      chatServiceRef.current.setToken(userData.visitor_token);
    }
  }, [userData?.visitor_token]);

  // 🔧 修复：添加消息去重Set，防止重复添加
  const processedMessagesRef = useRef<Set<string>>(new Set());

  // 🔧 修复：添加历史消息加载状态标记，防止加载期间WebSocket事件重复处理
  const isLoadingHistoryRef = useRef<boolean>(false);
  // 🔧 修复：记录历史消息加载完成时间，提供短暂的保护窗口
  const historyLoadCompleteTimeRef = useRef<number>(0);

  // 🔧 修复：使用useCallback稳定回调函数引用
  const handleImageGenerationCompleteCallback = useCallback((event: Event) => {
    const customEvent = event as CustomEvent;
    const { chatId, newMessage, source } = customEvent.detail;

    // console.log('🖼️ ChatWindow收到图片生成完成事件:', {
    //   chatId,
    //   currentChatId: id,
    //   source,
    //   messageType: newMessage?.type,
    //   messageId: newMessage?.id,
    //   hasImageUrl: !!newMessage?.imageUrl,
    //   isLoadingHistory: isLoadingHistoryRef.current,
    //   messagesLoading,
    //   currentMessagesCount: messages.length
    // });

    // 只处理当前聊天的图片消息
    if (chatId === id && newMessage && newMessage.type === 'image') {
      // console.log('🖼️ 处理图片生成完成事件:', {
      //   messageId: newMessage.id,
      //   status: newMessage.status,
      //   hasImageUrl: !!newMessage.imageUrl,
      //   isLoadingHistory: isLoadingHistoryRef.current
      // });

      // 🔧 修复：如果正在加载历史消息，或刚加载完成不久，跳过WebSocket事件处理，避免重复添加
      const timeSinceHistoryLoad = Date.now() - historyLoadCompleteTimeRef.current;
      if (isLoadingHistoryRef.current || (historyLoadCompleteTimeRef.current > 0 && timeSinceHistoryLoad < 2000)) {
        // console.log('🔄 历史消息加载中或刚完成，跳过WebSocket事件处理:', {
        //   messageId: newMessage.id,
        //   isLoading: isLoadingHistoryRef.current,
        //   timeSinceLoad: timeSinceHistoryLoad + 'ms'
        // });
        return;
      }

      // 🔧 修复：首先检查消息是否已经通过API加载被处理过
      if (processedMessagesRef.current.has(newMessage.id)) {
        // console.log('🖼️ 消息已被API加载处理过，尝试更新现有消息:', newMessage.id);

        // 消息已存在，只尝试更新
        setMessages(prev => {
          const existingIndex = prev.findIndex(msg => msg.id === newMessage.id);

          if (existingIndex >= 0) {
            const existingMessage = prev[existingIndex];

            // 检查是否是有意义的更新
            const needsUpdate =
              !existingMessage.imageUrl && newMessage.imageUrl || // 添加了图片URL
              existingMessage.status !== newMessage.status || // 状态发生变化
              existingMessage.content !== newMessage.content; // 内容发生变化

            if (needsUpdate) {
              // console.log('🖼️ 更新现有图片消息:', {
              //   messageId: newMessage.id,
              //   oldStatus: existingMessage.status,
              //   newStatus: newMessage.status,
              //   oldImageUrl: !!existingMessage.imageUrl,
              //   newImageUrl: !!newMessage.imageUrl
              // });

              const newMessages = [...prev];
              newMessages[existingIndex] = { ...existingMessage, ...newMessage };
              return newMessages;
            } else {
              // console.log('🖼️ 消息无需更新，保持现状:', newMessage.id);
              return prev;
            }
          } else {
            // console.log('🖼️ 警告：消息已标记为处理过但不在列表中:', newMessage.id);
            return prev;
          }
        });
      } else {
        // console.log('🖼️ 这是新的图片消息，添加到列表:', newMessage.id);

        // 添加新消息到当前聊天
        setMessages(prev => {
          const existingIndex = prev.findIndex(msg => msg.id === newMessage.id);

          if (existingIndex >= 0) {
            // console.log('🖼️ 消息已在列表中，但未被标记为处理过，直接更新:', newMessage.id);
            const newMessages = [...prev];
            newMessages[existingIndex] = { ...prev[existingIndex], ...newMessage };
            return newMessages;
          } else {
            // console.log('🖼️ 添加全新的图片消息:', newMessage.id);
            // 标记消息为已处理
            processedMessagesRef.current.add(newMessage.id);
            return [...prev, newMessage];
          }
        });
      }

      // 更新历史记录的最后一条消息
      if (onLastMessageUpdate) {
        onLastMessageUpdate(newMessage.content || '生成的图片', id); // 🔧 修复：传递当前聊天ID
      }

      // 🔧 修复：图片消息完成时清除等待状态
      if (newMessage.status === 'completed' || newMessage.status === 'Success' || newMessage.status === 'Read') {
        // console.log('🔧 WebSocket图片消息完成，清除等待状态:', { messageId: newMessage.id, status: newMessage.status });
        setWaitingForAIReply(false);
      }

      // 滚动到底部显示新图片
      setTimeout(() => {
        scrollToBottom();
      }, 100);
    }
  }, [id, onLastMessageUpdate, scrollToBottom]);

  // 监听WebSocket事件和图片生成事件
  useEffect(() => {
    const wsDebugCallback = (event: Event) => {
      const customEvent = event as CustomEvent;
      // console.log('🔄 ChatWindow收到WebSocket事件:', event.type);
      // console.log('🔄 事件数据:', customEvent.detail);
    };

    // 使用全局事件监听WebSocket数据
    window.addEventListener('chat-history-list-update', wsDebugCallback);
    window.addEventListener('chat-history-update', handleImageGenerationCompleteCallback);

    return () => {
      window.removeEventListener('chat-history-list-update', wsDebugCallback);
      window.removeEventListener('chat-history-update', handleImageGenerationCompleteCallback);
    };
  }, [handleImageGenerationCompleteCallback]); // 🔧 修复：使用稳定的回调函数引用

  // 智能滚动：只在真正需要时才滚动
  useEffect(() => {
    const prevMessages = prevMessagesRef.current;
    const currentMessages = messages;

    // 如果是第一次加载消息，直接滚动
    if (prevMessages.length === 0 && currentMessages.length > 0) {
      // console.log('首次加载消息，执行滚动', { messageCount: currentMessages.length });
      scrollToBottom();
      prevMessagesRef.current = [...currentMessages];
      return;
    }

    // 检查是否有新消息添加
    const hasNewMessage = currentMessages.length > prevMessages.length;

    // 检查是否有消息内容变化（流式更新）
    const hasContentChange = currentMessages.some((msg, index) => {
      const prevMsg = prevMessages[index];
      if (!prevMsg) return true; // 新消息

      // 检查重要的内容变化
      return (
        msg.content !== prevMsg.content || // 内容变化
        msg.imageUrl !== prevMsg.imageUrl || // 图片URL变化
        (msg.status === 'completed' && prevMsg.status !== 'completed') || // 状态变为完成
        (msg.type === 'audio' && msg.canPlay !== prevMsg.canPlay) // 音频可播放状态变化（仅限移动端首次可播放）
      );
    });

    // 检查是否只是播放状态变化（不需要滚动的情况）
    const isOnlyPlayStateChange = !hasNewMessage && !hasContentChange &&
      currentMessages.some((msg, index) => {
        const prevMsg = prevMessages[index];
        return prevMsg && (
          msg.isPlaying !== prevMsg.isPlaying || // 仅播放状态变化
          msg.duration !== prevMsg.duration // 仅时长变化
        );
      });

    // 只在有新消息或内容变化时滚动，播放状态变化时不滚动
    // 同时考虑用户是否正在手动滚动
    if ((hasNewMessage || hasContentChange) && !isOnlyPlayStateChange && !isUserScrollingRef.current) {
      // console.log('检测到消息变化，执行滚动', {
      //   hasNewMessage,
      //   hasContentChange,
      //   messageCount: currentMessages.length,
      //   prevMessageCount: prevMessages.length
      // });
      scrollToBottom();
    }

    // 检查消息是否已全部加载完成
    const allMessagesLoaded = !messagesLoading &&
      currentMessages.length > 0 &&
      !currentMessages.some(msg => msg.isStreaming);

    // 如果所有消息已加载完成，但onReady还没有被调用，尝试再次滚动并触发onReady
    if (allMessagesLoaded && !hasCalledReadyRef.current && onReady) {
      // console.log('检测到所有消息已加载完成，确保滚动到底部', {
      //   messageCount: currentMessages.length,
      //   messagesLoading
      // });
      scrollToBottom();
    }

    // 更新引用
    prevMessagesRef.current = [...currentMessages];
  }, [messages, scrollToBottom, messagesLoading, onReady]);

  // 自动播放新接收到的音频消息
  useEffect(() => {
    // 保存当前消息快照用于比较
    const currentMessages = messages;
    const prevMessages = prevMessagesRef.current;

    // 检测新接收到的音频消息：
    // 1. 在当前消息中但不在上一个状态的消息中 (新消息)
    // 2. 或者状态从非completed变为completed (刚完成的消息)
    const newReceivedAudioMessages = currentMessages.filter(currentMsg => {
      // 必须是音频消息、AI发送的、已完成状态、有音频数据、未播放过
      if (!(currentMsg.type === 'audio' &&
        currentMsg.sender === 'ai' &&
        currentMsg.status === 'completed' &&
        currentMsg.audioData &&
        !currentMsg.isPlaying &&
        !autoPlayedMessagesRef.current.has(currentMsg.id))) {
        return false;
      }

      // 查找上一个状态中的对应消息
      const prevMsg = prevMessages.find(msg => msg.id === currentMsg.id);

      // 条件1：新消息 - 在当前消息中但不在上一个状态的消息中
      if (!prevMsg) {
        return true;
      }

      // 条件2：状态刚变为completed - 之前不是completed，现在是completed
      if (prevMsg.status !== 'completed' && currentMsg.status === 'completed') {
        return true;
      }

      // 条件3：音频数据刚可用 - 之前没有audioData，现在有了
      if (!prevMsg.audioData && currentMsg.audioData) {
        return true;
      }

      return false;
    });

    // 如果有新接收到的音频消息，自动播放
    if (newReceivedAudioMessages.length > 0) {
      // 只播放最新接收到的一条
      const latestAudioMessage = newReceivedAudioMessages[newReceivedAudioMessages.length - 1];

      // console.log('🎵 自动播放新接收到的音频消息:', {
      //   messageId: latestAudioMessage.id,
      //   hasAudioData: !!latestAudioMessage.audioData,
      //   audioDataType: latestAudioMessage.audioData?.startsWith('http') ? 'URL' : 'base64',
      //   duration: latestAudioMessage.duration,
      //   receivedTime: new Date().toISOString()
      // });

      // 标记为已自动播放，避免重复播放
      autoPlayedMessagesRef.current.add(latestAudioMessage.id);

      // 停止所有正在播放的音频，并恢复其状态
      setMessages(prev => prev.map(msg =>
        msg.type === 'audio' && msg.isPlaying
          ? {
            ...msg,
            isPlaying: false,
            // 🔧 修复：将被中断的音频消息状态恢复为Success，避免状态异常
            status: 'Success' as const
          }
          : msg
      ));

      // 自动开始播放
      setTimeout(() => {
        handleAudioReplay(latestAudioMessage.id, latestAudioMessage.audioData!);
      }, 100); // 短暂延迟确保状态更新完成
    }
  }, [messages, handleAudioReplay]);

  // 监听用户滚动行为
  useEffect(() => {
    const messageContainer = messagesEndRef.current?.parentElement;
    if (!messageContainer) return;

    const handleScroll = () => {
      const { scrollTop, scrollHeight, clientHeight } = messageContainer;
      const isAtBottom = scrollHeight - scrollTop <= clientHeight + 100; // 100px tolerance
      isUserScrollingRef.current = !isAtBottom;
    };

    messageContainer.addEventListener('scroll', handleScroll, { passive: true });
    return () => messageContainer.removeEventListener('scroll', handleScroll);
  }, []);

  // 处理发送消息 - 使用useCallback优化
  const handleSendMessage = useCallback(async (content: string, isVoice: boolean) => {
    // 检查登录状态
    if (!isLoggedIn) {
      openLoginModal(false);
      return;
    }

    if (!chatServiceRef.current) return;

    try {
      const language = getLanguageCode;
      // console.log('🔍 发送的消息:', content);
      // 立即更新历史记录的最后一条消息（用户发送的消息）
      if (onLastMessageUpdate) {
        onLastMessageUpdate(content, id); // 🔧 修复：传递当前聊天ID
      }

      // 设置等待AI回复状态
      setWaitingForAIReply(true);

      if (isVoice) {
        // 停止所有正在播放的音频消息的播放状态，并恢复其状态
        setMessages(prev => prev.map(msg =>
          msg.type === 'audio' && msg.isPlaying
            ? {
              ...msg,
              isPlaying: false,
              // 🔧 修复：将被中断的音频消息状态恢复为Success，避免状态异常
              status: 'Success' as const
            }
            : msg
        ));

        await chatServiceRef.current.sendVoiceMessage(content, language, isMobile);
      } else {
        await chatServiceRef.current.sendTextMessage(content, language);
      }

      // console.log('✅ 消息发送成功，等待AI回复');
    } catch (error) {
      console.error('Error sending message:', error);

      // 发送失败时清除等待状态
      setWaitingForAIReply(false);

      // 检查是否是余额不足错误
      if ((error as any).isInsufficientTokens) {
        setTokenModalData({
          currentBalance: (error as any).currentBalance,
          required: (error as any).required,
          serviceType: (error as any).serviceType
        });
        setShowTokenModal(true);
        return;
      }

      // 检查是否是超时错误或其他网络错误
      if (error instanceof Error) {
        // console.log('❌ 消息发送失败，清除loading状态:', error.message);
        // 确保清除所有相关的loading状态
        setWaitingForAIReply(false);
      }

      // TODO: 显示其他错误提示
    }
  }, [isLoggedIn, openLoginModal, chatServiceRef, onLastMessageUpdate, getLanguageCode, isMobile]);

  // 处理登录成功 - 使用useCallback优化
  const handleLoginSuccess = useCallback(() => {
    handleLoginSuccessAndUpdateTab();
  }, [handleLoginSuccessAndUpdateTab]);

  // 移除重复的 Edit-ChatStatus 调用，因为已经在数据加载时处理了

  return (
    <>
      {/* 添加隐藏滚动条的样式 */}
      <style>
        {`
          .hide-scrollbar::-webkit-scrollbar {
            display: none;
          }
        `}
      </style>

      <div
        className={`flex flex-col bg-[rgb(19,19,19)] relative w-full ${isMobile ? 'h-full' : 'h-full'}`}
        style={
          isMobile ? {
            // backgroundImage: `url(${backgroundImage})`,
            backgroundSize: '100% auto',
            backgroundRepeat: 'repeat',
            backgroundPosition: 'top center',
            backgroundAttachment: 'local',
            maxHeight: '100%', // 确保不超过父容器高度
            overflow: 'hidden'  // 防止整体溢出
          } : {
            maxHeight: '100%', // 确保不超过父容器高度
            overflow: 'hidden',  // 防止整体溢出
          }}
      >

        {/* 消息列表区域 - 隐藏滚动条但保留滚动功能 */}
        <div
          className={`flex-1 overflow-y-auto px-4 relative z-10 ${isMobile ? 'pt-20 pb-4' : 'py-4'} hide-scrollbar`}
          style={{
            msOverflowStyle: 'none',  /* IE and Edge */
            scrollbarWidth: 'none',    /* Firefox */
            minHeight: 0,  /* 允许flex子项收缩到比内容更小 */
            maxHeight: '100%'  /* 确保不超过可用空间 */
          }}
        >
          {messagesLoading ? (
            // 加载状态
            <div className="flex items-center justify-center h-full">
              <div className="flex flex-col items-center space-y-4">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-pink-500"></div>
                {/* <span className="text-gray-400 text-sm">正在加载聊天历史...</span> */}
              </div>
            </div>
          ) : messagesError ? (
            // 错误状态
            <div className="flex items-center justify-center h-full">
              <div className="flex flex-col items-center space-y-4 text-center">
                <i className="fas fa-exclamation-triangle text-red-400 text-2xl"></i>
                <span className="text-red-400 text-sm">{messagesError}</span>
                <button
                  className="text-pink-500 text-sm hover:text-pink-400 transition-colors px-4 py-2 border border-pink-500 rounded-lg"
                  onClick={() => id && loadChatHistoryFromAPI(id)}
                >
                  重试
                </button>
              </div>
            </div>
          ) : messages.length === 0 ? (
            // 空状态
            <div className="flex items-center justify-center h-full">
            </div>
          ) : (
            // 消息列表
            <div>
              {messages.map((message, idx) => (
                <div key={message.id}>
                  <MessageBubble
                    message={message}
                    userAvatar={userData?.user_avatar}
                    aiAvatar={aiAvatar}
                    aiName={aiPersonData?.username}
                    onAudioReplay={handleAudioReplay}
                    onMobilePlayStart={handleMobilePlayStart}
                    onAudioPause={handleAudioPause}
                    scrollToBottom={scrollToBottom}
                    onImagePreview={onImagePreview}
                    chatService={chatServiceRef.current}
                  />
                </div>
              ))}

              {/* 自动滚动锚点 */}
              <div ref={messagesEndRef} />
            </div>
          )}
        </div>

        {/* 消息输入区域 */}
        <div
          className={`relative z-10 flex-shrink-0 ${isMobile ? 'pb-safe' : ''}`}
          style={{
            minHeight: 'fit-content'  /* 确保输入区域高度自适应内容 */
          }}
        >
          <MessageInput
            onSendMessage={handleSendMessage}
            disabled={waitingForAIReply}
            // isVoiceMode={isVoiceMode}
            setWaitingForAIReply={setWaitingForAIReply}
            onAddLocalMessage={message => {
              // 检查是否为更新现有消息
              if (message.id) {
                setMessages(prev => {
                  const index = prev.findIndex(msg => msg.id === message.id);
                  if (index !== -1) {
                    // console.log('🖼️ MessageInput更新现有消息:', message.id);
                    // 更新现有消息
                    const newMessages = [...prev];
                    newMessages[index] = { ...newMessages[index], ...message };
                    return newMessages;
                  } else {
                    // console.log('🖼️ MessageInput添加新消息:', message.id);
                    // 🔧 修复：标记消息为已处理，防止WebSocket事件重复添加
                    processedMessagesRef.current.add(message.id);
                    return [...prev, message];
                  }
                });
              } else {
                // 没有ID的消息直接添加
                setMessages(prev => [...prev, message]);
              }

              // 如果是用户发送的消息，更新历史记录的最后一条消息
              if (message.sender === 'user' && message.content && onLastMessageUpdate) {
                onLastMessageUpdate(message.content, id); // 🔧 修复：传递当前聊天ID
              }

              // 保存到历史记录 - 使用ChatService添加或更新消息
              if (chatServiceRef.current) {
                // 创建一个不可变的消息副本，避免对原消息的引用导致状态混乱
                const messageCopy = { ...message };

                // 检查是更新还是添加消息
                const history = chatServiceRef.current.getChatHistory();
                const existingIndex = history.messages.findIndex(m => m.id === message.id);

                if (existingIndex >= 0) {
                  // 更新现有消息
                  chatServiceRef.current.updateMessage(message.id, messageCopy);
                } else {
                  // 添加新消息
                  chatServiceRef.current.addMessage(messageCopy);
                }
              }

              // 确保滚动到底部
              setTimeout(scrollToBottom, 50);
            }}
          />
        </div>

        {/* 登录模态框 */}
        <div className="relative z-20">
          <LoginModal
            show={showLoginModal}
            onClose={closeLoginModal}
            onLoginSuccess={handleLoginSuccess}
            initialRegister={false}
            activeTab={activeTab}
          />
        </div>

        {/* Token不足弹窗 */}
        <TokenInsufficientModal
          show={showTokenModal}
          onClose={() => setShowTokenModal(false)}
          currentBalance={tokenModalData.currentBalance}
          required={tokenModalData.required}
          serviceType={tokenModalData.serviceType}
        />
      </div>
    </>
  );
};

export default ChatWindow; 